<script setup>
const onLogin = () => {
    alert('当前登录功能暂未开放，如果你是本站给管理员，请访问后台专用登录页面登录')
}

</script>
<template>
<div class="user-box">
    <div class="login-content">
        <h3>登录</h3>
        <hr>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <button @click="onLogin">登录</button>
        <div class="login-bottom">
            <span>使用其他方式登录</span>
            <div class="login-bottom-icon">
                <svg class="icon" aria-hidden="true" @click="onLogin">
                    <use xlink:href="#icon-weixin3"></use>
                </svg>
                <svg class="icon" aria-hidden="true" @click="onLogin">
                    <use xlink:href="#icon-QQ"></use>
                </svg>
                <svg class="icon" aria-hidden="true" @click="onLogin">
                    <use xlink:href="#icon-gitee2"></use>
                </svg>
            </div>
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>

.user-box{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .login-content{
        width: 500px;
        min-height: 400px;
        background: url(/default.jpg) no-repeat center center;
        margin-top: 20px;
        border-radius: 10px;
        padding: 20px 30px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        padding:20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        h3{
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        hr{
            width: 100%;
            border: none;
            height: 1px;
            background: #ccc;
            margin-bottom: 20px;
        }
        input{
            width: 80%;
            height: 40px;
            margin-bottom: 20px;
            padding: 0 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            &:focus{
                border-color: #409EFF;
            }
        }
        button{
            width: 80%;
            height: 40px;
            background: #409EFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            &:hover{
                background: #66b1ff;
            }
        }
        .login-bottom{
            margin-top: 20px;
            width: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            span{
                font-size: 14px;
                color: #999;
                margin-bottom: 10px;
            }
            .login-bottom-icon{
                display: flex;
                align-items: center;
                .icon{
                    width: 40px;
                    height: 40px;
                    margin: 0 10px;
                    cursor: pointer;
                    &:hover{
                        color: #409EFF;
                    }
                }
            }
        }
     
    }
    
}
</style>